<template>
  <div class="top_search flex-middle" v-bind="$attrs">
    <div :class="['left',type]"></div>
    <router-link tag="div" :to="`/search?q=${defaultKeyword}`" class="center flex1 flex-middle flex-center">
      <van-icon name="search" size=".48rem" />
      {{defaultKeyword}}
    </router-link>
    <div class="right flex-center flex-middle">
      <div :class="['global_sb',{'actived':actived}]">
        <i class="l1"></i>
        <i class="l2"></i>
        <i class="l3"></i>
        <i class="l4"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    type: String, //类 song：发现页专用 ，video：视频页专用
    defaultKeyword: String,
    actived:Boolean
  }
};
</script>

<style lang="scss" scoped>
.global_sb {
  width: 30px;
  height: 25px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  i {
    display: block;
    height: 20px;
    width: 2px;
    background: #62657d;
    &.l1 {
      height: 44%;
    }
    &.l3 {
      height: 48%;
    }
  }

  &.actived {
    i {
      animation: global_sb_play ease 1.5s infinite;
      &.l1 {
        animation-delay: .1s;
      }
      &.l2 {
        animation-delay: .2s;
      }
      &.l3 {
        animation-delay: 0;
      }
      &.l4 {
        animation-delay: .3s;
      }
    }
  }
  @keyframes global_sb_play {
    0% {
      height: 100%;
    }
    50% {
      height: 0%;
    }
    100% {
      height: 100%;
    }
  }
}
.left {
  width: 35px;
  height: 35px;
  flex: 0 0 40px;
  background: no-repeat center/70%;
  &.song {
    background-image: url("../assets/img/luyin.png");
  }
}
.right {
  width: 35px;
  height: 35px;
  flex: 0 0 40px;
  background: no-repeat center/70%;
}
.center {
  height: 35px;
  border-radius: 18px;
  background: $inputBg;
  color: $placeHolderColor;
  font-size: 14px;
}
</style>